<template>
	<view class="home-container">
    <cu-custom bgColor="bg-gradual-red"><block slot="content">七月画室</block></cu-custom>
    <card-swiper :swiperList="swiperList" :dotStyle="dotStyle"></card-swiper>
    <icon-list :dotStyle="dotStyle" :iconSwiperList="iconSwiperList"></icon-list>
    <block v-for="item in cardsInfo" :key="item.id">
      <view class="cu-bar solid-bottom bg-gradual-red margin-tb-xs">
        <view class="action">
          <text class="icon-title text-white"></text>{{item.name}}
        </view>
        <view class="action" @tap="onMore(item.name)">
          <text class="text-white">更多 >></text>
        </view>
      </view>
      <card-list :cardList="item.cardList" :isCard="isCard"></card-list>
    </block>
    <view class="cu-tabbar-height"></view>
	</view>
</template>

<script>
  import {chunk} from '../../utils/collection.js'
  import homeData from '../../data/home.js'
  import CardList from '../../components/home/card-list.vue'
  import CardSwiper from '../../components/home/card-swiper.vue'
  import IconList from '../../components/home/icon-list.vue'
	export default {
    components: {
      CardList, CardSwiper, IconList
    },
    computed: {
      iconSwiperList () {
        return chunk(this.iconList, 8)
      }
    },
		data() {
			return {
				swiperList: homeData.swiperList,
				dotStyle: true,
        iconList: homeData.iconList,
        isCard: false,
        cardsInfo: homeData.cardsInfo
			}
		},
		methods: {
      onMore (name) {
        uni.navigateTo({
        	url: '/pages/more/more?name='+name
        })
      }
		}
	}
</script>

<style>
  .cu-card {
    overflow: initial;
  }
</style>
